<script setup lang="ts">
import { deleteWarnAPI, getWarnDataAPI } from '@/apis/rodWarn';
import type { WarnItemType, WarnDataParamsType } from '@/types/rodWarn';
import { ref } from 'vue';
import { handleStatusMap } from '@/utils/rodWarn'
import { ElMessage, ElMessageBox } from 'element-plus';

// 获取告警数据所需参数
const getWarnDataParams = ref<WarnDataParamsType>({
  page: 1, // 当前页码
  pageSize: 5, // 每页条数
  poleName: undefined, // 一体杆名称
  poleNumber: undefined, // 一体杆编号
  handleStatus: undefined // 处置状态0:未派单,1:已派单,2:已接单,3:已完成
})

// 获取告警数据
const warnList = ref<WarnItemType[]>([]) // 告警列表
const warnTotal = ref<number>(0) // 告警总数

const getWarnData = async () => {
  const res = await getWarnDataAPI(getWarnDataParams.value)
  warnList.value = res.data.rows
  warnTotal.value = res.data.total
}
getWarnData()

// 删除告警记录
const deteleWarn = async (id: number) => {
  await ElMessageBox.confirm('确定删除该条告警记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await deleteWarnAPI(id)
  ElMessage.success('删除成功')
  getWarnData()
}

</script>

<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input @clear="getWarnData()" v-model="getWarnDataParams.poleName" placeholder="请输入一体杆名称" clearable class="search-main" />
      <span class="search-label">一体杆编号：</span>
      <el-input @clear="getWarnData()" v-model="getWarnDataParams.poleNumber" placeholder="请输入一体杆编号" clearable class="search-main" />
      <span class="search-label">处置状态：</span>
      <el-select @clear="getWarnData()" v-model="getWarnDataParams.handleStatus" placeholder="请选择运行状态" clearable style="width: 240px">
        <el-option label="未派单" value="0" />
        <el-option label="已派单" value="1" />
        <el-option label="已接单" value="2" />
        <el-option label="已完成" value="3" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="getWarnData()">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="warnList">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="故障类型" prop="errorType" />
        <el-table-column label="处置状态" prop="handleStatus">
          <template #default="scope">
            {{ handleStatusMap.get(scope.row.handleStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="告警时间" prop="warningTime" />
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" link :disabled="row.handleStatus !== 0" v-permission="'pole:warning:send'">派单</el-button>
            <el-button size="small" type="primary" link @click="$router.push(`/warnDetail/${row.id}`)" v-permission="'pole:warning:query'">详情</el-button>
            <el-button size="small" type="primary" link :disabled="row.handleStatus !== 0 || row.handleStatus !== 3" @click="deteleWarn(row.id)" v-permission="'pole:warning:remove'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination 
        layout="total, sizes, prev, pager, next"
        :total="warnTotal"
        :page-sizes="[2,5,10,20]"
        v-model:current-page="getWarnDataParams.page"
        v-model:page-size="getWarnDataParams.pageSize"
        @change="getWarnData()"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding: 10px 0 30px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
